<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding-top: 100px;
            padding-left: 100px;
            user-select: none;
        }

        .password {
            display: inline-block;
            position: relative;
            height: 40px;
            line-height: 40px;
            width: 300px
        }

        .password>input[type='text'],input[type='password'] {
            background-color: transparent;
            width: 100%;
            height: 100%;
            outline: none;
            font-size: 16px;
            box-sizing: border-box;
            border: none;
            border-bottom: 1px solid #cccccc;
            letter-spacing: 6px;
        }

        .password>span {
            display: block;
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9;
            font-size: 16px;
            color: #cccccc;
            transform: translateY(0%);
            transition: all 300ms ease-in;
            z-index: -1;
        }

        .password>span.active {
            transform: translateY(-70%);
            font-size: 12px;
            color:  rgb(54, 54, 167);
            z-index: 10;
        }

        .password >span .icon{
            float: right;
            cursor: pointer;
            display: none;
        }
        .password>span.active .icon {
            display: block;
        }

        .password>hr {
            position: absolute;
            bottom: -1px;
            left: 0px;
            width: 0%;
            height: 0px;
            margin: 0px;
            border: none;
            border-bottom: 1px solid rgb(54, 54, 167);
            transition: all 300ms ease-in;
        }

        .password>hr.active {
            width: 100%;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <label class="password">
            <input v-bind:type="type" 
                @blur=" hideTip() " 
                @focus=" isBlur=true "
                @input=" pwd=$event.target.value "
            >
            <span v-bind:class=" isBlur?'active':'' ">
                <span>Password</span>
                <svg t="1611193537514" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2672" 
                    width="30px" 
                    height="100%"
                    v-bind:fill=" type=='text'?'#3636a7':'#cccccc' "
                    @click=" type = type=='text'?'password':'text' "
                >
                    <path
                        d="M446.464 471.04c0 10.24 2.048 22.528 6.144 30.72 4.096 10.24 10.24 18.432 18.432 26.624 8.192 8.192 16.384 14.336 26.624 18.432 10.24 4.096 20.48 6.144 30.72 6.144 10.24 0 22.528-2.048 30.72-6.144 10.24-4.096 18.432-10.24 26.624-18.432 8.192-8.192 14.336-16.384 18.432-26.624 4.096-10.24 6.144-20.48 6.144-30.72 0-10.24-2.048-22.528-6.144-30.72-4.096-10.24-10.24-18.432-18.432-26.624-8.192-8.192-16.384-14.336-26.624-18.432-10.24-4.096-20.48-6.144-30.72-6.144-10.24 0-22.528 2.048-30.72 6.144-10.24 4.096-18.432 10.24-26.624 18.432-8.192 8.192-14.336 16.384-18.432 26.624C448.512 448.512 446.464 460.8 446.464 471.04L446.464 471.04zM446.464 471.04"
                        p-id="2673"></path>
                    <path
                        d="M524.288 270.336C327.68 270.336 223.232 471.04 223.232 471.04s137.216 202.752 309.248 202.752c172.032 0 305.152-202.752 305.152-202.752S718.848 270.336 524.288 270.336L524.288 270.336zM530.432 618.496c-81.92 0-147.456-65.536-147.456-147.456 0-81.92 65.536-147.456 147.456-147.456 81.92 0 147.456 65.536 147.456 147.456C677.888 552.96 610.304 618.496 530.432 618.496L530.432 618.496zM530.432 618.496"
                        p-id="2674"></path>
                </svg>
            </span>
            <hr v-bind:class=" isBlur?'active':'' ">
        </label>
        <br><br><br>
        <label class="password" style="width: 200px;height: 30px; line-height: 30px;">
            <input v-bind:type="type" 
                @blur=" hideTip() " 
                @focus=" isBlur=true "
                @input=" pwd=$event.target.value "
            >
            <span v-bind:class=" isBlur?'active':'' ">
                <span>Password</span>
                <svg t="1611193537514" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2672" 
                    width="30px" 
                    height="100%"
                    v-bind:fill=" type=='text'?'#3636a7':'#cccccc' "
                    @click=" type = type=='text'?'password':'text' "
                >
                    <path
                        d="M446.464 471.04c0 10.24 2.048 22.528 6.144 30.72 4.096 10.24 10.24 18.432 18.432 26.624 8.192 8.192 16.384 14.336 26.624 18.432 10.24 4.096 20.48 6.144 30.72 6.144 10.24 0 22.528-2.048 30.72-6.144 10.24-4.096 18.432-10.24 26.624-18.432 8.192-8.192 14.336-16.384 18.432-26.624 4.096-10.24 6.144-20.48 6.144-30.72 0-10.24-2.048-22.528-6.144-30.72-4.096-10.24-10.24-18.432-18.432-26.624-8.192-8.192-16.384-14.336-26.624-18.432-10.24-4.096-20.48-6.144-30.72-6.144-10.24 0-22.528 2.048-30.72 6.144-10.24 4.096-18.432 10.24-26.624 18.432-8.192 8.192-14.336 16.384-18.432 26.624C448.512 448.512 446.464 460.8 446.464 471.04L446.464 471.04zM446.464 471.04"
                        p-id="2673"></path>
                    <path
                        d="M524.288 270.336C327.68 270.336 223.232 471.04 223.232 471.04s137.216 202.752 309.248 202.752c172.032 0 305.152-202.752 305.152-202.752S718.848 270.336 524.288 270.336L524.288 270.336zM530.432 618.496c-81.92 0-147.456-65.536-147.456-147.456 0-81.92 65.536-147.456 147.456-147.456 81.92 0 147.456 65.536 147.456 147.456C677.888 552.96 610.304 618.496 530.432 618.496L530.432 618.496zM530.432 618.496"
                        p-id="2674"></path>
                </svg>
            </span>
            <hr v-bind:class=" isBlur?'active':'' ">
        </label>
        <br><br><br>
        <label class="password" style="width: 150px;height: 20px; line-height: 20px;">
            <input v-bind:type="type" 
                @blur=" hideTip() " 
                @focus=" isBlur=true "
                @input=" pwd=$event.target.value "
            >
            <span v-bind:class=" isBlur?'active':'' ">
                <span>Password</span>
                <svg t="1611193537514" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2672" 
                    width="30px" 
                    height="100%"
                    v-bind:fill=" type=='text'?'#3636a7':'#cccccc' "
                    @click=" type = type=='text'?'password':'text' "
                >
                    <path
                        d="M446.464 471.04c0 10.24 2.048 22.528 6.144 30.72 4.096 10.24 10.24 18.432 18.432 26.624 8.192 8.192 16.384 14.336 26.624 18.432 10.24 4.096 20.48 6.144 30.72 6.144 10.24 0 22.528-2.048 30.72-6.144 10.24-4.096 18.432-10.24 26.624-18.432 8.192-8.192 14.336-16.384 18.432-26.624 4.096-10.24 6.144-20.48 6.144-30.72 0-10.24-2.048-22.528-6.144-30.72-4.096-10.24-10.24-18.432-18.432-26.624-8.192-8.192-16.384-14.336-26.624-18.432-10.24-4.096-20.48-6.144-30.72-6.144-10.24 0-22.528 2.048-30.72 6.144-10.24 4.096-18.432 10.24-26.624 18.432-8.192 8.192-14.336 16.384-18.432 26.624C448.512 448.512 446.464 460.8 446.464 471.04L446.464 471.04zM446.464 471.04"
                        p-id="2673"></path>
                    <path
                        d="M524.288 270.336C327.68 270.336 223.232 471.04 223.232 471.04s137.216 202.752 309.248 202.752c172.032 0 305.152-202.752 305.152-202.752S718.848 270.336 524.288 270.336L524.288 270.336zM530.432 618.496c-81.92 0-147.456-65.536-147.456-147.456 0-81.92 65.536-147.456 147.456-147.456 81.92 0 147.456 65.536 147.456 147.456C677.888 552.96 610.304 618.496 530.432 618.496L530.432 618.496zM530.432 618.496"
                        p-id="2674"></path>
                </svg>
            </span>
            <hr v-bind:class=" isBlur?'active':'' ">
        </label>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            isBlur: false,
            pwd:"",
            type:"password"
        },
        methods:{
            hideTip(){
                if(this.pwd.length==0){
                    this.isBlur = false;
                }
            }
        }
    })
</script>

</html>